import React from 'react'
import { Layout, Row, Col, Icon, Divider } from 'antd'
import screenfull from 'screenfull'
import '@/style/view-style/index.scss'

import BarEcharts from './bar.jsx'
import BarEcharts2 from './bar2.jsx'
import PieEcharts from './pie.jsx'
import LineEcharts from './line.jsx'
import ScatterEcharts from './line.jsx'
import PictorialBarEcharts from './line.jsx'
import { useRequest } from 'ahooks'
import { requestWrapper } from '@/utils/request'
import homeAPI from '@/services/home'
const Index = () => {
    const fullToggle = () => {
        if (screenfull.isEnabled) {
            screenfull.request(document.getElementById('bar'))
        }
    }
    //各类新闻数量
    const { data: countByTypeDate = {} } = useRequest(
        params => requestWrapper(homeAPI.countByType.bind(null, { createdTime: false }), {}),
        {
            onSuccess: () => {
                console.log(countByTypeDate)
            }
        }
    )
    //七天各类新闻增加量
    const { data: newsCount } = useRequest(
        params => requestWrapper(homeAPI.countByType.bind(null, { createdTime: true }), {}),
        {
            onSuccess: () => {
                console.log(countByTypeDate)
            }
        }
    )
    //近七天总数量变化
    const { data: countByWeekDate } = useRequest(params => requestWrapper(homeAPI.countByWeek.bind(null, params), {}), {
        onSuccess: () => {
            console.log(countByWeekDate)
        }
    })

    //最近发布的10条新闻
    const { data: latelyNewsDate } = useRequest(params => requestWrapper(homeAPI.latelyNews.bind(null, params), {}), {
        onSuccess: () => {
            console.log(latelyNewsDate)
        }
    })

    return (
        <Layout className='index animated fadeIn'>
            <Row gutter={24} className='index-header'>
                <Col span={4}>
                    <div className='base-style js'>
                        <Icon type='flag' className='icon-style' />
                        <div>
                            <span>{countByTypeDate['military']}</span>
                            <div>军事</div>
                        </div>
                    </div>
                </Col>
                <Col span={4}>
                    <div className='base-style keji'>
                        <Icon type='experiment' className='icon-style' />
                        <div>
                            <span>{countByTypeDate['science']}</span>
                            <div>科技</div>
                        </div>
                    </div>
                </Col>
                <Col span={4}>
                    <div className='base-style yl'>
                        <Icon type='line-chart' className='icon-style' />
                        <div>
                            <span>{countByTypeDate['pastime']}</span>
                            <div>娱乐</div>
                        </div>
                    </div>
                </Col>
                <Col span={4}>
                    <div className='base-style yx'>
                        <Icon type='desktop' className='icon-style' />
                        <div>
                            <span>{countByTypeDate['game']}</span>
                            <div>游戏</div>
                        </div>
                    </div>
                </Col>
                <Col span={4}>
                    <div className='base-style qc'>
                        <Icon type='car' className='icon-style' />
                        <div>
                            <span>{countByTypeDate['car']}</span>
                            <div>汽车</div>
                        </div>
                    </div>
                </Col>
                <Col span={4}>
                    <div className='base-style jk'>
                        <Icon type='medicine-box' className='icon-style' />
                        <div>
                            <span>{countByTypeDate['health']}</span>
                            <div>健康</div>
                        </div>
                    </div>
                </Col>
            </Row>
            <Row gutter={8}>
                {/* <Col span={12}>
                    <div className='base-style'>
                        <PieEcharts />
                    </div>
                </Col> */}
                <Col span={12}>
                    <div className='base-style'>
                        {countByTypeDate && <BarEcharts countByTypeDate={countByTypeDate} />}
                    </div>
                </Col>
                <Col span={12}>
                    <div className='base-style'>
                        {countByTypeDate && <PieEcharts countByTypeDate={countByTypeDate} />}
                    </div>
                </Col>
                <Col span={12}>
                    <div className='base-style'>
                        {countByWeekDate && <LineEcharts countByWeekDate={countByWeekDate} />}
                    </div>
                </Col>
                <Col span={12}>
                    <div className='base-style'>{newsCount && <BarEcharts2 newsCount={newsCount} />}</div>
                </Col>
                {/* <Col span={12}>
                    <div className='base-style'>
                        <ScatterEcharts />
                    </div>
                </Col>
                <Col span={12}>
                    <div className='base-style'>
                        <PictorialBarEcharts />
                    </div>
                </Col> */}
            </Row>
        </Layout>
    )
}

export default Index
